<template>
  <div class="BusinessCenter">

    <div class="businessCenter_wrap">
      <div id="divData" style="width: 100%; height: auto; text-align: left; vertical-align: top;">
        <input type="hidden" value="promotionsLeftMenu" id="activeLeftMenu">
        <div class="content_right_swap" style="display: block;">
          <div class="content_right_title">下属中间商合作中心</div>
          <div class="invitedInfoWrap">
            <div class="invitedPerson fl">
              <span>合作中间商数:</span>
              <span id="cphServerData_labBeInvitedPersons">{{list.length}}</span>
            </div>
            <div style="height: 40px; line-height: 40px; float: left; font-size: 18px;">|</div>
            <div class="achieveRewardwrap fr">
              <span>获得分成:</span>
              <span id="cphServerData_labAchieveReward">{{ztc}}元</span>
            </div>
          </div>
          <!-- <div class="promotionBanner"></div>-->
          <div class="kindlyReminderblock">
            <h2>温馨提示:</h2>
            <p>1. 通过邀请有商家资源的人注册账号，如：主持、代运营公司、电商培训机构、top大商家成交订单每一单可获得1到2元的利润。</p>
            <p style="color: red">2. 不同区间的成本价明细
            </p>

            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="money" label="价格区间">
              </el-table-column>
              <el-table-column prop="cmoney" label="成本价">
              </el-table-column>
              <el-table-column prop="" label="给中间商最低价格">
              </el-table-column>

            </el-table>
          </div>
          <div>
            <span style="margin-right: 10px;">复制链接发送邀请给好友</span>
            <input name="ctl00$cphServerData$txtInviterLink" type="text" :value="currentUrl+'?k='+urlList[2]['key']" :data-clipboard-text="urlList[2]['key']?currentUrl+'?k='+ urlList[2]['key']:'待生成'" @click="copy('tag-read3')" class="tag-read3 link" readonly="readonly" id="cphServerDatatxtInviterLink" style="border-style:None;width: 430px">
            <el-button :data-clipboard-text="urlList[2]['key']?currentUrl+'?k='+ urlList[2]['key']:'待生成'" @click="copy('tag-read3')" class="tag-read3" size="mini">复制
            </el-button>

          </div>

        </div>

      </div>
    </div>
    <br/>

    <div>
      <div style="text-align: center;padding: 20px 0 0 0;">
        <h3>商家邀请列表</h3>
      </div>
      <el-table :data="list" style="width: 100%;padding-top: 35px" header-row-class-name="c">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="tableData4" max-height="460" style="width: 100%">
              <el-table-column label="店铺多多号" prop="taobao" width="90">
              </el-table-column>
              <el-table-column label="代码注入状态" prop="status" width="120">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="active" v-if="scope.row.status == 0">
                    待激活
                  </el-button>
                  <el-button size="mini" type="primary" v-if="scope.row.status == 1">已激活
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="防降权代码注入时间" prop="addTime" width="150">
              </el-table-column>
              <el-table-column label="防降权代码结束时间" prop="" width="150">
              </el-table-column>
              <el-table-column label="续费防降权代码时间" prop="" width="150">
              </el-table-column>
              <el-table-column label="续费一年防降权代码时间" prop="" width="175">
              </el-table-column>
              <el-table-column label="续费永久防降权代码时间" prop="" width="175">
              </el-table-column>
              <!--<el-table-column fixed="right" label="" width="100">
                                              <template slot-scope="scope">
                                                  <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" size="small"
                                                             type="text">
                                                      移除
                                                  </el-button>
                                              </template>
                                          </el-table-column>-->
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="user" label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="qq" label="QQ" width="160">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="110">
          <template slot-scope="scope">
            <template v-if="scope.row.type =='0'">
              合作商
            </template>
            <template v-if="scope.row.type =='1'">
              代理商
            </template>
            <template v-if="scope.row.type =='2'">
              商家
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="注册时间" width="160">
          <template slot-scope="scope">
            {{scope.row.addTime}}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="余额" width="100">
        </el-table-column>
        <el-table-column prop="" label="今日消费" width="100">
        </el-table-column>
        <el-table-column prop="" label="昨日消费" width="100">
          <template slot-scope="scope">
            {{userArr[scope.row.user]?userArr[scope.row.user].okComMoney+userArr[scope.row.user].okMoney:0}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="本金" width="100">
          <template slot-scope="scope">
            {{userArr[scope.row.user]?userArr[scope.row.user].okMoney:0}}
          </template>
        </el-table-column>
        <el-table-column prop="okComMoney" label="佣金" width="100">
          <template slot-scope="scope">
            {{userArr[scope.row.user]?userArr[scope.row.user].okComMoney:0}}
          </template>
        </el-table-column>
        <el-table-column prop="okMoney" label="提成" width="100">
          <template slot-scope="scope">
            {{ moneyz[scope.row.user]?(moneyz[scope.row.user].okComMoney*0.1).toFixed(2):0}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="总消费" width="100">
          <template slot-scope="scope">
            {{moneyz[scope.row.user]?moneyz[scope.row.user].okComMoney+moneyz[scope.row.user].okMoney:0}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="今日完成单数" width="110">
        </el-table-column>
        <el-table-column prop="" label="昨日完成单数" width="110">
          <template slot-scope="scope">
            {{userArr[scope.row.user]?userArr[scope.row.user].okNum:0}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="总完成单数" width="110">
          <template slot-scope="scope">
            {{moneyz[scope.row.user]?moneyz[scope.row.user].okNum:0}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="110">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" v-if="scope.row.status =='0'" @click=" setMoney(1,scope.row)">待审核
            </el-button>
            <el-button size="mini" type="primary" v-else @click="setArr(0,scope.row.id)">审核通过
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="设置价格" width="110">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click=" setMoney(1,scope.row)">设置价格
            </el-button>

          </template>
        </el-table-column>

      </el-table>
      <br/>
      <el-pagination :page-size="20" :current-page="searchList.pn" layout="prev, pager, next" :total="searchList.total" @current-change="getCooperationList" v-if="searchList.total > 20">
      </el-pagination>
      <el-dialog title="设置佣金" :visible.sync="dialogMoney" custom-class="dialogMoney">
        <template>
          <el-form>
            <el-form-item label="">

              <el-radio label="默认模式" v-model="model" @change="modelChange">
                默认模式
              </el-radio>
              （价格固定为成本价加1元,提成固定为1元）

            </el-form-item>
            <el-form-item label="">
              <el-radio label="55分成模式" v-model="model" @change="modelChange">
                55分成模式
              </el-radio>
              （自定义价格,不能低于成本价+1元,提成为(价格-成本价)/2）
            </el-form-item>
          </el-form>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="商品价格=$" prop="money" width="110">
            </el-table-column>
            <el-table-column label="成本价" prop="cost" width="70">
            </el-table-column>

            <el-table-column label="自定义价格" prop="price" width="90">
              <template slot-scope="scope">
                <el-input size="small" v-model="commission[scope.$index]">
                </el-input>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding-top: 15px;text-align: center">
            <el-button @click="upCommission()" type="primary">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Clipboard from "clipboard";

export default {
  data() {
    return {
      tableData4: [],
      model: "默认模式",
      userId: "",
      users: [],
      ztc: 0,
      userArr: [], //自定义数据
      user: "",
      tableData: [
        {
          money: "$<100",
          cost: "9",
          cmoney: 0
        },
        {
          money: "101$<150",
          cost: "11",
          cmoney: 0
        },
        {
          money: "151≤$<250",
          cost: "12",
          cmoney: 0
        },
        {
          money: "251≤$<350",
          cost: "14",
          cmoney: 0
        },
        {
          money: "351≤$<450",
          cost: "17",
          cmoney: 0
        },
        {
          money: "451≤$<500",
          cost: "19",
          cmoney: 0
        },
        {
          money: "501≤$<800",
          cost: "23",
          cmoney: 0
        },
        {
          money: "801≤$<1000",
          cost: "26",
          cmoney: 0
        }
      ],
      dialogMoney: false,
      searchList: {
        search: "user",
        searchValue: "",
        filter: {
          status: ""
        },
        pn: 1,
        total: 0
      },
      url: "",
      urlList: [],
      list: [],
      commission: [10, 12, 13, 15, 18, 20, 24, 27],
      money: 1000,
      currentUrl: "",
      currentMoney: []
    };
  },
  methods: {
    getPrice() {
      let _this = this;
      _this.$http
        .post("/api/api.php", {
          id: "getPrice"
        })
        .then(function(response) {
          let result = response.data.data;
          _this.currentMoney = result;
          console.log(_this.currentMoney);
          for (let i = 0; i < _this.currentMoney.length; i++) {
            _this.tableData[i].cmoney = _this.currentMoney[i];
          }
          console.log(_this.tableData);
          let k = 0;
          for (let i in _this.tableData) {
            _this.tableData[i].cost = response.data.data[k];
            _this.commission[k] =
              response.data.data[k] + response.data.data[k] * 0.2;
            k++;
          }
        });
    },
    goto(a) {
      window.open(a);
    },
    modelChange(a) {
      let commissionTemp = [];
      if (a === "55分成模式") {
        for (let i in this.commission) {
          commissionTemp[i] =
            this.tableData[i].cost * 1 + this.tableData[i].cost * 0.2;
        }
      } else {
        for (let i in this.commission) {
          commissionTemp[i] =
            this.tableData[i].cost * 1 + this.tableData[i].cost * 0.2;
        }
      }
      this.commission = commissionTemp;
    },
    upCommission() {
      let _this = this;
      _this.$http
        .post("/api/api.php", {
          id: "upCommission",
          data: JSON.stringify(_this.commission),
          money: _this.money,
          user: _this.user
        })
        .then(function(response) {
          _this.$message({
            type: response.data.status,
            message: response.data.msg
          });
          _this.getLinkList();
          if (response.data.status === "success") {
            _this.setArr(1, _this.userId);

            _this.dialogMoney = false;
          }
        });
    },
    setMoney(a, b) {
      this.dialogMoney = true;
      this.user = b.user;
      this.userId = b.id;
    },
    getCooperationList(page) {
      if(page){
        this.searchList.pn=page;
      }
      let _this = this;
      _this.$http
        .post("/api/api.php", {
          id: "getCooperationList2",
          search: JSON.stringify(_this.searchList),
          type: 2
        })
        .then(function(response) {
          if (response.data.status === "success") {
            _this.list = response.data.data;
            _this.userArr = response.data.users;
            _this.moneyz = response.data.usersz;
            _this.searchList.total = parseInt(response.data.total);
            for (let i in _this.moneyz) {
              _this.ztc += _this.moneyz[i].okComMoney * 0.1;
            }
          }
        });
    },
    setArr(a, b) {
      let _this = this;
      _this.$http
        .post("/api/api.php", {
          id: "setCooperationStatus",
          status: a,
          cooperationId: b
        })
        .then(function(response) {
          _this.$message({
            type: response.data.status,
            message: response.data.msg
          });
          _this.getCooperationList();
        });
    },
    copy(a) {
      let _this = this;
      let clipboard = new Clipboard("." + a);
      clipboard.on("success", e => {
        console.log("复制成功");
        _this.$message({
          type: "success",
          message: "复制成功"
        });
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        _this.$message({
          type: "error",
          message: "复制失败，请手动复制"
        });
        console.log("该浏览器不支持自动复制");
        clipboard.destroy();
      });
    },
    addLink(a) {
      let _this = this;
      _this.$http
        .post("/api/api.php", {
          id: "addLink",
          type: a
        })
        .then(function(response) {
          _this.getLinkList();
        });
    },
    getLinkList() {
      let _this = this;
      _this.$http
        .post("/api/api.php", {
          id: "getLink"
        })
        .then(function(response) {
          _this.urlList = response.data.data;
          // console.log(_this.urlList);
          /*else {_this.url = '未生成';}*/
        });
    }
  },
  mounted() {
    let _this = this;
    _this.getLinkList();
    _this.getCooperationList();
    _this.getPrice();
    this.currentUrl = window.location.host;
  }
};
</script>
<style lang="scss">
.BusinessCenter {
  .businessCenter_wrap {
    margin: 0 auto;
    background: #f6f6f6;
    width: 770px;
    padding: 15px;
  }

  .dialogMoney {
    width: 400px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }

  .demo-table-expand {
    font-size: 0;
    margin-left: 50px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

  /*清除浮动*/
  .clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {
    zoom: 1;
  }

  .clear {
    clear: both;
  }

  /*公共class 浮动*/
  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  /*headerTop 顶部样式*/
  .headerTop {
    width: 1000px;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
  }

  .headerTopSwap {
    float: right;
  }

  .headerTop_part {
    float: left;
    margin-left: 10px;
  }

  .headerTop_Mobile span {
    color: #757575;
    border-right: 2px solid #8c8c8c;
    padding-right: 10px;
  }

  .btnRechargeTurn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
  }

  .btnQuit {
    border: none;
    background: none;
    border-left: 2px solid #8c8c8c;
    padding: 0;
    padding-left: 10px;
    margin-left: -40px;
    cursor: pointer;
    height: 21px;
  }

  /*header 菜单样式*/
  .menu {
    float: right;
    font-size: 18px;
    width: 80%;
    text-align: right;
    color: #696969;
  }

  .menu span {
    width: 20%;
    display: inline-block;
  }

  .menu span a {
    color: #696969;
    text-decoration: none;
    line-height: 85px;
    display: inline-block;
  }

  .menu span a:hover {
    color: #fd394f;
  }

  .header {
    background: #f6f6f6;
    height: 85px;
    width: 1000px;
    margin: 0 auto;
  }

  .header img {
    height: 75px;
    margin-top: 5px;
    float: left;
  }

  /*左侧菜单样式*/
  .menu_nav {
    width: 220px;
    background: #f6f6f6;
    float: left;
  }

  .menu_nav ul a {
    color: #696969;
    text-decoration: none;
    margin-left: 20px;
    font-size: 18px;
    display: inline-block;
    width: 120px;
    cursor: pointer;
  }

  .menu_nav ul a:hover {
    color: #fd3950;
  }

  .menu_nav ul li {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
  }

  .menu_nav ul li i {
    height: 26px;
    width: 26px;
    display: inline-block;
    position: relative;
    top: 8px;
  }

  /*右侧内容样式*/
  .content_right_swap {
    width: 95%;
    height: auto;
    margin: 0 auto;
  }

  .content_right_title {
    margin: 20px 0;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #707070;
    border-bottom: 1px solid #a7a7a7;
  }

  /*右侧样式（商家中心部分）*/
  .business_info {
    position: relative;
  }

  .yellow_hr {
    width: 722px;
    margin: 0px auto;
    padding: 0px;
    overflow: hidden;
    height: 2px;
    background: #f8b551;
    position: absolute;
    top: 38px;
    left: 3px;
  }

  .business_info_nickname_wrap {
    color: #000;
    font-weight: 500;
    font-size: 16px;
    margin: 20px;
  }

  .business_info_nickname {
    margin-top: 20px;
    border-bottom: 1px dotted #b5b5b5;
    padding-bottom: 10px;
  }

  .business_info_nickname_text span:first-child {
    width: 105px;
    display: inline-block;
    letter-spacing: 6.5px;
  }

  .business_editnickname {
    text-decoration: underline;
    background: none;
    border: none;
    color: #fd394f;
    font-size: 16px;
    cursor: pointer;
  }

  .baseInfo,
  .business_info_commission_warp {
    margin-top: 10px;
    border-bottom: 1px dotted #b5b5b5;
    padding-bottom: 10px;
  }

  .business_info_mobile_text,
  .business_info_balance_text,
  .business_info_freezing_text {
    width: 103px;
    display: inline-block;
    letter-spacing: 4.5px;
  }

  .business_info_commission_text {
    width: 105px;
    display: inline-block;
  }

  .business_info_commission_warp input {
    font-size: 16px;
    border: none;
    background: none;
    text-decoration: underline;
    color: #fd394f;
    cursor: pointer;
  }

  .blue_hr {
    width: 722px;
    margin: 0px auto;
    padding: 0px;
    overflow: hidden;
    height: 2px;
    background: #00a0e9;
    margin-bottom: 20px;
    position: absolute;
    top: 38px;
    left: 3px;
  }

  .modifyPassword_input {
    background: #fff;
    margin-bottom: 10px;
    border-radius: 3px;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
  }

  .modifyPassword_input span {
    margin: 0px 10px 0 20px;
    font-size: 16px;
    color: #707070;
    font-weight: 500;
  }

  .modifyPassword_input input {
    border: none;
    height: 21px;
    font-size: 16px;
    width: 80%;
  }

  .dotted_hr {
    width: 100%;
    height: 1px;
    border-bottom: 1px dotted #b5b5b5;
    margin: 15px 0;
  }

  .btn_wrap {
    width: 40%;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .btn_wrap input {
    width: 100px;
    height: 35px;
    background: #00a0e9;
    border: 1px solid #00a0e9;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }

  /*商家公告*/
  .business_info_Notice_wrap {
    min-height: 270px;
    margin-bottom: 20px;
    position: relative;
  }

  .business_info_Notice_title {
    // background: url("../../assets/promotionBanner.png") no-repeat center center;
    width: 205px;
    height: 40px;
    margin-top: 30px;
  }

  .red_hr {
    width: 722px;
    margin: 0px auto;
    padding: 0px;
    overflow: hidden;
    height: 2px;
    background: #fd394f;
    position: absolute;
    top: 38px;
    left: 3px;
  }

  .noticeTitle {
    margin: 20px;
    font-size: 18px;
  }

  .noticeContent {
    width: 90%;
    margin: 0 auto;
    text-align: left;
    text-indent: 16px;
    line-height: 18px;
  }

  .noticeImg {
    margin: 20px;
    max-width: 720px;
  }

  .noticeCreatTime {
    text-align: right;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 10px;
    color: #a0a0a0;
  }

  .noticeH1 {
    font-size: 24px;
    color: #7d7d7d;
    margin-top: 100px;
  }

  .invitedInfoWrap {
    background: #fd394f;
    border: 1px solid #fd394f;
    border-radius: 5px;
    height: 40px;
    color: #fff;
    margin-bottom: 20px;
  }

  .invitedPerson,
  .achieveRewardwrap {
    line-height: 40px;
    width: 49%;
    text-align: center;
    font-size: 18px;
  }

  .promotionBanner {
    background: url("../../assets/promotionBanner.png") no-repeat center center;
    width: auto;
    height: 224px;
    margin-bottom: 20px;
  }

  .kindlyReminderblock {
    background: #fff;
    font-size: 16px;
    font-weight: 500;
  }

  .kindlyReminderblock h2 {
    margin-left: 20px;
    padding: 20px 0 10px 0;
    font-weight: 500;
  }

  .kindlyReminderblock p {
    margin-left: 20px;
    padding-bottom: 10px;
  }

  .kindlyReminderblock p span {
    color: #ff4d3d;
  }

  .kindlyReminderblock q {
    margin-left: 20px;
    color: #ff4d3d;
  }

  .link {
    width: 480px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-indent: 20px;
    background: #d6d6d6;
  }

  .btnCopyLink {
    background: #fd394f;
    width: 120px;
    height: 32px;
    border: 1px solid #fd394f;
    color: #fff;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
